---
title: MPA e SPA a confronto
description: "Comprendere le differenze tra le architetture Multi-Page Application (MPA) e Single-Page Application (SPA) è fondamentale per capire perché Astro è diverso da altri framework web come Next.js o Remix."
i18nReady: false
---

Comprendere le differenze tra le architetture Multi-Page Application (MPA) e Single-Page Application (SPA) è fondamentale per capire perché Astro è diverso da altri framework web come Next.js o Remix.

## Terminologia

Con il termine **Multi-Page Application (MPA)** si intende un sito web composto da diverse pagine HTML, normalmente renderizzate su un server. Quando si accede a una nuova pagina nel browser, il browser richiede la pagina HTML al server. **Astro è un framework MPA.** Esistono altri framework MPA molto diffusi, tra cui Ruby on Rails, Django (in Python), Laravel, WordPress, Joomla, Drupal (in PHP), nonché generatori di siti statici quali Eleventy o Hugo.

Con il termine **Single-Page Application (SPA)** si intende una singola applicazione JavaScript che si carica nel browser dell'utente e successivamente renderizza l'HTML localmente. Alcune SPA possono *anche* generare HTML sul server, ma la peculiarità delle SPA consiste nella loro capacità di eseguire un sito web come applicazione JavaScript, renderizzando nuove pagine HTML nel browser durante la navigazione. Next.js, Nuxt, SvelteKit, Remix, Gatsby e Create React App sono tutti esempi di framework SPA.

## Astro e altri framework MPA a confronto

Astro è un framework MPA. Tuttavia Astro possiede alcune caratteristiche uniche rispetto ad altri framework MPA. La differenza principale è che Astro usa JavaScript come linguaggio lato server e durante l'esecuzione. Tradizionalmente i framework MPA richiedono la scrittura di codice in linguaggi diversi sul server (Ruby, PHP, ecc.) e nel browser (JavaScript). Astro invece utilizza solo JavaScript, HTML e CSS, permettendo di renderizzare i componenti di UI (ad esempio React o Svelte) sia sul server che sul client.

Il risultato è una esperienza sviluppatore che ricorda molto quella in Next.js o altri framework web più moderni, ma con risultati, in termini di performance, tipici di un'architettura MPA tradizionale.

## MPA e SPA a confronto

Ci sono tre differenze principali da tenere in considerazione quando si confrontano MPA e SPA:

#### Renderizzazione lato server (MPA) e lato client (SPA) a confronto

Nelle MPA la maggior parte delle pagine HTML sono renderizzate sul server. Nelle SPA, invece, la maggior parte dell'HTML è renderizzato localmente da codice JavaScript in esecuzione nel browser. Tutto ciò ha un impatto molto rilevante sul sito, dal punto di vista delle funzionalità, delle performance e del SEO (Search Engine Optimization).

Renderizzare l'HTML nel browser può sembrare, a prima vista, l'opzione che offre maggiori vantaggi in termini di velocità, rispetto a dover richiedere l'HTML da un server remoto. Tuttavia, è vero il contrario. Un SPA normalmente avrà performance peggiori in fase di caricamento della prima pagina, rispetto a una MPA, a meno che l'HTML stesso sia già stato renderizzato lato server. Questo succede perché in una SPA è necessario scaricare, interpretare il codice ed eseguire un'intera applicazione JavaScript nel browser, solo per renderizzare l'HTML della pagina. In seguito, probabilmente la SPA dovrà anche scaricare dati aggiuntivi dal server remoto, facendo così aumentare il tempo necessario prima che la pagina sia pronta per essere mostrata nel browser.

Quasi tutti i framework SPA provano a mitigare questi problemi di performance utilizzando delle tecniche per renderizzare la prima pagina sul server. Questo è sicuramente un miglioramento, tuttavia introduce della complessità aggiuntiva dovuta al fatto che ora il sito web può essere renderizzato in modalità e ambienti diversi (server, browser). Questo comportamento può inoltre creare false aspettative negli utenti del sito, dal momento che il sito potrebbe essere già visibile nel browser (HTML) ma non è possibile interagire con esso perché il codice JavaScript sta ancora caricandosi in background.

Generalmente le MPA renderizzano tutto l'HTML sul server remoto e di solito richiedono poco, o affatto, JavaScript per funzionare. Per questo motivo le MPA, durante il caricamento iniziale, mostrano il contenuto di una pagina molto più velocemente rispetto alle SPA. Questa velocità iniziale è cruciale per i siti orientati ai contenuti. Esistono tuttavia alcuni limiti in questo approccio: per esempio, la navigazione delle pagine successive alla prima non sfrutterà la renderizzazione locale, a discapito di una migliore esperienza utente, soprattutto quando gli utenti interagiscono più a lungo con il sito.

#### Routing lato server (MPA) e lato client (SPA) a confronto

Dove risiede la logica di routing di un sito? In una MPA ogni nuova richiesta al server determina quale sarà l'HTML inviato al browser, per questo si dice che la logica di routing risiede sul server. In una SPA, invece, la logica di routing è parte dell'applicazione in esecuzione localmente nel browser; ogni richiesta di navigazione è intercettata dal browser stesso che renderizza la nuova pagina senza nemmeno contattare il server.

È possibile notare alcune similitudini con quanto descritto nella sezione precedente, dove una MPA offre un più rapido caricamento della prima pagina, mentre una SPA offre un più rapido caricamento della seconda o terza pagina, dal momento che l'applicazione JavaScript è già caricata completamente nel browser.

Le SPA offrono un controllo migliore sulle transizioni tra pagine durante la navigazione, in quanto controllano ogni aspetto della renderizzazione delle pagine. Per ottenere lo stesso livello di supporto alle transizioni, alcune MPA utilizzano strumenti come [Turbo](https://turbo.hotwired.dev/), la libreria di Hotwire che simula il routing lato client intercettando gli eventi di navigazione nel browser. L'HTML è comunque renderizzato lato server, ma Turbo può mostrare transizioni fluide tra le pagine simili al routing lato client delle SPA.

#### Gestione dello stato lato server (MPA) e lato client (SPA) a confronto

Le SPA, per via della loro architettura, sono migliori per siti che hanno una gestione complessa e multi-pagina dello stato (per esempio: Gmail). Questo perché una SPA esegue l'intero sito web come una singola applicazione JavaScript, consentendo all'applicazione di mantenere lo stato e la memoria anche navigando tra pagine diverse. Esperienze altamente interattive e guidate dai dati, come caselle di posta elettronica o pannelli di amministrazione, sono più adatte ad essere implementate con SPA, in quanto sono di per sé più simili ad "app".


## Le MPA sono meglio delle SPA?

Nel confronto tra MPA e SPA, non c'è "meglio" o "peggio". Tutto dipende da quello che si vuole ottenere e relativi compromessi.

**Astro predilige le performance e la semplicità delle MPA perché sono più adatte al caso d'uso di siti web incentrati sui contenuti.** Altri siti più interattivi, con una complessa gestione dello stato interno, possono trarre più benefici da un'architettura SPA più simile alle "app", anche a costo di performance inferiori durante il caricamento iniziale.

:::note[Accessibilità]
Per la navigazione le MPA utilizzano il tag `<a>` standard, che fornisce importanti caratteristiche di accessibilità, quali la gestione del focus degli elementi della pagina e la notifica automatica del cambio pagina.
:::

## Casi studio

Di seguito un elenco di comparazioni tra Astro e altri framework:

- [Astro vs. SPA (Next.js)](https://twitter.com/t3dotgg/status/1437195415439360003) - 94% meno JavaScript
- [Astro vs. SPA (Next.js)](https://twitter.com/jlengstorf/status/1442707241627385860?lang=en) - 34% più velocità in caricamento
- [Astro vs. SPA (Next.js)](https://vanntile.com/blog/next-to-astro) – 65% riduzione del traffico di rete
- [Astro vs. SPA (Remix, SvelteKit)](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8163s) - "Il punteggio Lighthouse è incredibile."
- [Astro vs. Qwik](https://www.youtube.com/watch?v=2ZEMb_H-LYE&t=8504s) - 43% più veloce TTI (Time to Interactive) 

Se siete a conoscenza di altre comparazioni pubbliche non presenti in questo elenco, potete aggiungerle creando una PR.

## Risorse aggiuntive 

Un video registrato da Surma (di Google) e Jake Archibald (di Google) in cui si confrontanto [esattamente su questo argomento](https://www.youtube.com/watch?v=ivLhf3hq7eM)

